<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="../index.css">
	<script type="text/javascript" src="../index.js"></script>
	<title>GridManager:使用Promise方式加载</title>
	<style>
		html, body{
			overflow-x:hidden;
			margin: 0;
			padding: 0;
		}
		.plugin-action{
			display: inline-block;
			color: steelblue;
			margin-right: 10px;
			cursor: pointer;
			text-decoration: none;
		}
		.plugin-action:hover{
			text-decoration: underline;
		}
		.search-area{
			padding: 10px 20px;
			border: 1px solid #ccc;
			background: #efefef;
			margin-bottom: 15px;
		}
		.search-area .sa-ele{
			display: inline-block;
			margin-right: 20px;
			font-size: 12px;
		}
		.search-area .sa-ele .se-title{
			display: inline-block;
			margin-right: 10px;
		}
		.search-area .sa-ele .se-con{
			display: inline-block;
			width:180px;
			height: 24px;
			border: 1px solid #ccc;
			padding: 0 4px;
			line-height: 24px;
		}
		.search-area .sa-ele .search-action, .search-area .sa-ele .reset-action{
			display: inline-block;
			width:80px;
			height: 26px;
			border: 1px solid #ccc;
			background: #e8e8e8;
			padding: 0 4px;
			line-height: 26px;
			text-align: center;
			cursor: pointer;
			margin-right: 10px;
		}
		.search-area .sa-ele .search-action:hover, .search-area .sa-ele .reset-action:hover{
			opacity: 0.7;
		}

		.bottom-bar{
			background: #f8f8f8;
			padding: 10px;
			margin-top: 10px;
		}
		.bottom-bar button{
			padding: 5px 20px;
			margin-right: 10px;
		}
		.bottom-bar a{
			font-size: 12px;
			margin-right: 10px;
		}
		.grid-main {
			height: calc(100vh - 64px - 57px);
		}

		.table-form{
			display: flex;
			padding: 14px 100px;
		}
		.tf-photo{
			width: 60px;
			height: 60px;
			border: 1px solid #eee;
			border-radius: 50%;
			overflow: hidden;
		}
		.tf-photo img{
			width: 60px;;
		}
		.tf-text{
			width: 240px;
			padding-left: 10px
		}
		.tf-el{
			line-height: 30px;
		}
		.tf-el label{
			display: inline-block;
			width: 50px;
			color: #666;
			margin-right: 10px;
			text-align: right;
			font-weight: 600;
		}
	</style>
	<script>
		// 博文类型
		const TYPE_MAP = {
			'1': 'HTML/CSS',
			'2': 'nodeJS',
			'3': 'javaScript',
			'4': '前端鸡汤',
			'5': 'PM Coffee',
			'6': '前端框架',
			'7': '前端相关'
		};

	</script>
</head>

<body>

<section class="search-area">
	<div class="sa-ele">
		<label class="se-title">标题:</label>
		<input class="se-con" name="title"/>
	</div>
	<div class="sa-ele">
		<label class="se-title">内容:</label>
		<input class="se-con" name="content"/>
	</div>
	<div class="sa-ele">
		<button class="search-action">搜索</button>
		<button class="reset-action">重置</button>
	</div>
</section>
<section class="grid-main">
	<table id="test"></table>
</section>
<section class="bottom-bar">
	<button id="init-gm" disabled>init</button>
	<button id="destroy-gm" disabled>destroy</button>
	<a href="https://github.com/baukh789/GridManager/blob/master/src/demo/promise.html" target="_blank">查看源码</a>
</section>
<script type="text/javascript">
	// 模拟了一个简单的promise请求
	const getBlogList = function(paramse) {
		return new Promise((resolve, reject) => {
			const xhr = new XMLHttpRequest();
			xhr.open('POST', 'https://www.lovejavascript.com/blogManager/getBlogList');
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xhr.onreadystatechange = function() {
				if (xhr.readyState !== 4) {
					return;
				}
				if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
					resolve(xhr.response);
				} else {
					reject(xhr);
				}
			};

			// 一个简单的处理参数的示例
			let formData = '';
			for (let key in paramse) {
				if(formData !== '') {
					formData += '&';
				}
				formData += key + '=' + paramse[key];
			}
			xhr.send(formData);
		});
	};

	// GridManager 渲染
	var table = document.querySelector('table');
	function init() {
		table.GM({
			gridManagerName: 'test',
			height: '100%',
			supportAjaxPage:true,
			isCombSorting: false,
			disableCache: false,
			ajaxData: function (setting, params) {
				// 传入分页及排序的配置项
				return getBlogList(Object.assign({}, params, setting.pageData, setting.sortData));
			},
			ajaxType: 'POST',
			supportMenu: true,
			pageSize:30,
			columnData: [
				{
					key: 'pic',
					remind: 'the pic',
					width: '110px',
					align: 'center',
					text: '缩略图',
					// 使用函数返回 dom node
					template: function(pic, rowObject) {
						var picNode = document.createElement('a');
						picNode.setAttribute('href', `https://www.lovejavascript.com/#!zone/blog/content.html?id=${rowObject.id}`);
						picNode.setAttribute('title', rowObject.title);
						picNode.setAttribute('target', '_blank');
						picNode.title = `点击阅读[${rowObject.title}]`;
						picNode.style.display = 'block';
                        picNode.style.height = '58.5px';

						var imgNode = document.createElement('img');
						imgNode.style.width = '90px';
						imgNode.style.margin = '0 auto';
						imgNode.alt = rowObject.title;
						imgNode.src = `https://www.lovejavascript.com/${pic}`;

						picNode.appendChild(imgNode);
						return picNode;
					}
				},{
					key: 'title',
					remind: 'the title',
					width: '300px',
					align: 'left',
					text: '标题',
					sorting: '',
					// 使用函数返回 dom node
					template: function(title, rowObject) {
						var titleNode = document.createElement('a');
						titleNode.setAttribute('href', `https://www.lovejavascript.com/#!zone/blog/content.html?id=${rowObject.id}`);
						titleNode.setAttribute('title', title);
						titleNode.setAttribute('target', '_blank');
						titleNode.innerText = title;
						titleNode.title = `点击阅读[${rowObject.title}]`;
						titleNode.classList.add('plugin-action');

						return titleNode;
					}
				},{
					key: 'type',
					remind: 'the type',
					text: '博文分类',
					width: '100',
					align: 'center',
					template: function(type, rowObject){
						return TYPE_MAP[type];
					}
				},{
					key: 'info',
					remind: 'the info',
					text: '简介',
					isShow: false
				},{
					key: 'username',
					remind: 'the username',
					width: '100px',
					align: 'center',
					text: '作者',
					template: function(username){
						return `<a class="plugin-action" href="https://github.com/baukh789" target="_blank" title="去看看${username}的github">${username}</a>`;
					}
				},{
					key: 'createDate',
					remind: 'the createDate',
					width: '100px',
					text: '创建时间',
					sorting: 'DESC',
					// 使用函数返回 htmlString
					template: function(createDate, rowObject){
						return new Date(createDate).toLocaleDateString();
					}
				},{
					key: 'lastDate',
					remind: 'the lastDate',
					width: '130px',
					text: '最后修改时间',
					sorting: '',
					// 使用函数返回 htmlString
					template: function(lastDate, rowObject){
						return new Date(lastDate).toLocaleDateString();
					}
				}
			],
			// 排序后事件
			sortingAfter: function (data) {
				console.log('sortAfter', data);
			}
		});
	}

	/**
	 * 提供demo中的搜索, 重置
	 */
	(function(){

		// 绑定搜索事件
		document.querySelector('.search-action').addEventListener('click', function () {
			var _query = {
				title: document.querySelector('[name="title"]').value,
				type: document.querySelector('[name="type"]').value,
				content: document.querySelector('[name="content"]').value,
				cPage: 1
			};
			table.GM('setQuery', _query, function(){
				console.log('setQuery执行成功');
			});
		});

		// 绑定重置
		document.querySelector('.reset-action').addEventListener('click', function () {
			document.querySelector('[name="title"]').value = '';
			document.querySelector('[name="type"]').value = '-1';
			document.querySelector('[name="content"]').value = '';
		});
	})();

	/**
	 * 绑定 实例化, 消毁事件
	 */
	(function () {
		var initDOM = document.getElementById('init-gm');
		var destroyDOM = document.getElementById('destroy-gm');
		// 绑定初始化事件
		initDOM.onclick = function(){
			init();
			initDOM.setAttribute('disabled', '');
			destroyDOM.removeAttribute('disabled');
		};

		// 绑定消毁事件
		destroyDOM.onclick = function(){
			table.GM('destroy');
			initDOM.removeAttribute('disabled');
			destroyDOM.setAttribute('disabled', '');
		};

	})();

	/**
	 * 初始进入时, 执行init 方法
	 */
	(function(){
		init();
		var initDOM = document.getElementById('init-gm');
		var destroyDOM = document.getElementById('destroy-gm');
		initDOM.setAttribute('disabled', '');
		destroyDOM.removeAttribute('disabled');
	})();
</script>
</body>
</html>
